<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider v-model:collapsed="collapsed" collapsible>
            <div class="logo">
                <h3 style="text-align: center;color: #fff;">cms-vue3</h3>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item key="1">
                    <home-outlined />
                    <span>首页</span>
                    <router-link :to="{ name: 'Home' }"></router-link>
                </a-menu-item>
                <!-- 一级菜单 -->
                <a-sub-menu :key="item.id" v-for="item of menus">
                    <template #title>
                        <user-outlined v-if="item.type === 'user'" />
                        <setting-outlined v-else-if="item.type === 'setting'" />
                        <wallet-outlined v-else-if="item.type === 'wallet'" />
                        <area-chart-outlined v-else-if="item.type === 'area-chart'"/>
                        <file-text-outlined v-else-if="item.type === 'content'" />
                        <wechat-outlined v-else-if="item.type === 'wechat'"/>
                        <span v-if="item.children !== null">{{ item.authName }}</span>
                        <span v-else @click="void(0)">{{ item.authName }}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <a-menu-item v-for="sub of item.children"  :key="sub.id">
                        <router-link :to="item.path + '/' + sub.path">
                            <appstore-outlined v-if="sub.type === 'appstore'" />
                            <span>{{ sub.authName }}</span>
                        </router-link>
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                    <template #title>
                        <span>
                            <setting-outlined />
                            <span>Team</span>
                        </span>
                    </template>
                    <a-sub-menu key="sub4">
                        <template #title>
                            <span>
                                <setting-outlined />
                                <span>Team</span>
                            </span>
                        </template>
                        <a-menu-item key="6">
                            <setting-outlined />
                            <span>Team 1</span>
                        </a-menu-item>
                        <a-menu-item key="8">Team 2</a-menu-item>
                    </a-sub-menu>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout>
            <!-- 头部标签 -->
            <a-layout-header style="background: #fff; padding: 0">
                <span class="title">
                    {{ title }}
                </span>
                <!-- 登录用户基本信息显示 -->
                <span class="login_avatar">
                    <a-dropdown :trigger="['click']" placement="bottom">
                        <a-avatar size="large" :src="avatarUrl">
                            <template #icon>
                                <UserOutlined />
                            </template>
                        </a-avatar>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" @click="updateAdminInfo()">个人信息</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;" @click="logout">退出</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </span>
            </a-layout-header>
            <a-layout-content style="margin: 16px 16px">
                <!-- <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>User</a-breadcrumb-item>
                    <a-breadcrumb-item>Bill</a-breadcrumb-item>
                </a-breadcrumb> -->
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <router-view></router-view>
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                CodingGorit's blog management ©2023 Created by Gorit
            </a-layout-footer>
        </a-layout>
    </a-layout>
    <a-modal v-model="updateAdminModalVisible" title="修改个人信息" :footer="false">
        <p>修改个人信息</p>
    </a-modal>
</template>
<script lang="ts" setup>
import { AppstoreOutlined, UserOutlined, SettingOutlined, WalletOutlined, AreaChartOutlined, FileTextOutlined, HomeOutlined, WechatOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAdminStore } from '@/store/AdminStore';
import { storeToRefs } from 'pinia';
import { menus } from '@/mock';

const adminStore = useAdminStore();
const { avatar } = storeToRefs(adminStore);
const { $reset } = adminStore;

const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);
const title = ref<string>('cloud-myblog 后台管理系统');
const updateAdminModalVisible = ref<boolean>(false);
const avatarUrl = ref("");
const menu = ref<unknown[]>([]);

const router = useRouter();

onMounted(() => {
    // console.log("Home",adminStore);
    // avatarUrl.value = avatar.value;
    // avatar.value = adminStore.getAvatar;
});

// TODO: use real data
// const getMenuList = () => {
//     menu.value = menus;
// };

// 更新管理员个人信息
const updateAdminInfo = () => {
    updateAdminModalVisible.value = true
};

const logout = () => {
    window.localStorage.clear();
    window.sessionStorage.clear();
    router.replace('/login');
    $reset();
    message.success('退出成功');
};

</script>

<style scoped>
.title {
    font-family: "微软雅黑";
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
}

.login_avatar {
    float: right;
    margin-right: 80px;
}


#components-layout-demo-side .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
    background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
    background: #141414;
}
</style>
  